<template>
	<view>
		<action-bar title="创建账本"></action-bar>
		<form>
			<view class="cu-form-group margin-top-sm">
				<view class="title">账本所属人</view>
				<input type="text" :value="nickName" disabled>
			</view>
			
			<view class="cu-form-group margin-top-sm">
				<view class="title">账本名称</view>
				<input type="text" placeholder="请填写账本名称" v-model="account.bookName">
			</view>
			
			<view class="cu-form-group margin-top-sm">
				<view class="title">备注信息</view>
				<input type="text" placeholder="请填写备注信息" v-model="account.bookMark">
			</view>
			
			<view class="cu-form-group margin-top-sm">
				账本封面
			</view>
			<view class="bg-white iamges-content">
				<view @click="selectAccountImage(0)"
					  :class="account.imageId == 0 ? 'select-image jump-animation' : ''"
					  class="cu-avatar lg img account-image"></view>
				<view v-for="(item, index) in images"
					  @click="selectAccountImage(item.id)"
					  :style="'background-image: url(' + (header + item.path) + ')'"
					  :class="account.imageId == item.id ? 'select-image jump-animation' : ''"
					  class="cu-avatar lg img account-image">
				</view>
			</view>
			
		</form>
		
		<view class="flex justify-center margin-top-xl">
			<button @click="cancel()" class="cu-btn">取消</button>
			<button @click="operate()" class="cu-btn bg-blue margin-left-xl">确定</button>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {header, images} from '../../static/account-images.js'
	export default {
		data() {
			return {
				header, images,
				owner: '',
				accountId: null,
				op: null,	// 操作：1：修改
				account: {
					userId: null,
					bookName: '',
					bookMark: '',
					imageId: 0
				}
			}
		},
		onLoad(option) {
			this.accountId = option.id
			this.op = option.op
			
			if (option.id && option.op) {
				this.select()
			}
			
			this.account.userId = this.id
			if (!this.op && this.$anyNull(this.account.userId)) {
				this.$message.error('初始化加载失败')
			}
		},
		computed: {
			...mapGetters(['id', 'nickName'])
		},
		methods: {
			cancel() {
				uni.navigateBack()
			},
			select() {
				this.$request({
					url: `/account/${this.accountId}`
				}).then(res => {
					if (res && res.data.code == 200) {
						this.account.bookName = res.data.account.bookName
						this.account.bookMark = res.data.account.bookMark
						this.account.imageId = res.data.account.imageId
					}
				})
			},
			operate() {
				let url = '/account/'
				let method = 'POST'
				let message = '添加'
				if (this.op && this.accountId) {  // 修改
					method = 'PUT'
					message = '修改'
				} else {  // 添加
					if (!this.account.bookName) {
						this.$message.info('请输入账本名称')
						return
					}
				}
				this.$request({
					url: url,
					method: method,
					data: {
						'id': this.accountId,
						'userId': this.account.userId,
						'bookName': this.account.bookName,
						'mark': this.account.bookMark,
						'imageId': this.account.imageId
					}
				}).then(res => {
					if(res && res.data.code === 200) {
						uni.showToast({title: `${message}成功`})
						setTimeout(() => {
							uni.redirectTo({url: 'index'})
						}, 500)
					} else {
						
					}
				}).catch(err => {
					uni.showToast({title: '请求失败', icon: 'error'})
				})
			},
			selectAccountImage(id) {
				this.account.imageId = id
			}
		},
	}
</script>

<style>
	.account-image {
		border-radius: 10rpx 25rpx 25rpx 10rpx;
		width: 	90rpx !important;
		height: 110rpx !important;
		margin: 30rpx 50rpx;
	}
	
	.iamges-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.select-image {
		box-shadow: 6px 5px 10px #9e9e9e;
	}
</style>
